<template>
  <div class="lifecycle-page">
    <h1>onUnmounted 生命周期钩子</h1>
    
    <div class="lifecycle-card">
      <h2>什么是 onUnmounted?</h2>
      <p>onUnmounted 钩子在组件卸载完成后调用，此时组件实例已被销毁，所有指令已被解绑，子组件也已被销毁。</p>
    </div>
    
    <div class="lifecycle-card">
      <h2>企业实践</h2>
      <p>在实际开发中，onUnmounted的常见用途：</p>
      <ul>
        <li>记录组件销毁日志</li>
        <li>发送组件使用统计数据</li>
        <li>通知其他组件该组件已被销毁</li>
      </ul>
      <div class="code-example">
        <pre><code>
import { onUnmounted } from 'vue'
import { logComponentLifecycle } from '@/utils/analytics'

export default {
  setup() {
    // 组件创建时记录
    const componentId = generateUniqueId()
    const startTime = Date.now()
    
    // 组件销毁时记录
    onUnmounted(() => {
      const usageDuration = Date.now() - startTime
      
      // 记录组件使用时长
      logComponentLifecycle({
        componentId,
        event: 'unmounted',
        usageDuration,
      })
      
      console.log(`组件已销毁，使用时长: ${usageDuration}ms`)
    })
  }
}
        </code></pre>
      </div>
    </div>
    
    <div class="lifecycle-card">
      <h2>生命周期总结</h2>
      <p>Vue 3 Composition API 生命周期钩子顺序：</p>
      <ol>
        <li><strong>setup()</strong> - 组件初始化</li>
        <li><strong>onBeforeMount</strong> - 组件挂载前</li>
        <li><strong>onMounted</strong> - 组件挂载后</li>
        <li><strong>onBeforeUpdate</strong> - 组件更新前</li>
        <li><strong>onUpdated</strong> - 组件更新后</li>
        <li><strong>onBeforeUnmount</strong> - 组件卸载前</li>
        <li><strong>onUnmounted</strong> - 组件卸载后</li>
      </ol>
    </div>
    
    <div class="navigation">
      <router-link to="/beforeUnmount" class="nav-button">上一个: onBeforeUnmount</router-link>
      <router-link to="/haha" class="nav-button">返回主页</router-link>
    </div>
  </div>
</template>

<script>
import { onUnmounted, onMounted } from 'vue'

export default {
  name: 'OnUnmountedView',
  setup() {
    const startTime = Date.now()
    
    onMounted(() => {
      console.log('组件已挂载，开始计时')
    })
    
    onUnmounted(() => {
      const duration = Date.now() - startTime
      console.log(`onUnmounted 被调用，组件存活时间: ${duration}ms`)
    })
  }
}
</script>

<style scoped>
.lifecycle-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  color: #3498db;
  text-align: center;
  margin-bottom: 30px;
}

.lifecycle-card {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

h2 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.code-example {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
  margin: 15px 0;
}

pre {
  margin: 0;
}

ul, ol {
  padding-left: 20px;
}

li {
  margin-bottom: 8px;
}

.navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.nav-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.nav-button:hover {
  background-color: #2980b9;
}
</style>